<template>
  <div class="emp-container">
    <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>人事管理</el-breadcrumb-item>
        <el-breadcrumb-item>员工列表</el-breadcrumb-item>

      </el-breadcrumb>
    </el-row>
    <el-row>

      <div class="query-zone">
        <el-form label-width="80px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="员工姓名">
                <el-input v-model="query.name"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="员工部门">
                <el-select v-model="query.dept">
                  <el-option v-for="dept in depts" :label="dept.name" :value="dept.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="员工上级">
                <el-select></el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="职务">
                <el-select v-model="query.title">
                  <el-option v-for="title in titles" :label="title.name" :value="title.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>


            <el-col :span="6" :offset="8">
              <el-form-item>
                <el-button type="success" @click="queryClick" class="btn">搜索</el-button>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
      </div>
    </el-row>
    <el-row>
      <el-button-group>
        <el-button type="success" @click="dialogVisible=true">员工入职</el-button>
        <el-button type="primary" @click="showUpdateHandle">员工转职</el-button>
        <el-button type="danger" @click="btnOutClick">员工离职</el-button>
      </el-button-group>
    </el-row>
    <el-row>


      <el-table :data="employees"
                ref="elTable"
                @row-click="rowClick"
                @current-change="handleCurrentChange"
                border stripe fit
                highlight-current-row

      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column prop="dept.name"
                         label="部门"
                         width="180">

        </el-table-column>
        <el-table-column prop="title.name"
                         label="职务"
                         width="180">

        </el-table-column>
        <el-table-column prop="super.name"
                         label="上级">
        </el-table-column>
        <el-table-column prop="status"
                         label="在职状态">
          <template v-slot="scope">
            {{scope.row.status|jobStatus}}
          </template>
        </el-table-column>
      </el-table>
    </el-row>


    <el-dialog title="员工入职"
               :visible.sync="dialogVisible"
               width="30%">

      <el-form label-width="80px">
        <el-form-item label="员工姓名">
          <el-input v-model="dialog.employee.name"></el-input>
        </el-form-item>
        <el-form-item label="员工部门">
          <el-select v-model="dialog.employee.dept.id">
            <el-option v-for="dept in depts" :label="dept.name" :value="dept.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工职务">
          <el-select></el-select>
        </el-form-item>
        <el-form-item label="员工上级">
          <el-select></el-select>
        </el-form-item>

        <el-from-item>
          <el-row>
            <el-col offset="12">
              <el-button type="success" @click="btnEnterClick">入职</el-button>
              <el-button type="primary" @click="btnChangeClick">转职</el-button>

            </el-col>
          </el-row>


        </el-from-item>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "employee",
    data: function () {
      return {
        depts: [],
        titles: [],
        employees: [],
        clicked: false,
        query: {
          name: '',
          dept: 0,
          title: 0,
          super: 0
        },
        currentRow: {},
        dialog: {
          selectedDept: 0,
          employee: {
            name: '',
            dept: {
              id: 0
            },
            title: {}
          }
        },
        dialogVisible: false
      }
    },
    mounted() {
      this.initDepts();
      this.initTitles();
      this.initTable();
    }, methods: {
      initTable() {
        let _this = this;
        this.axios({
          url: "http://test.org/employee/list",
          method: "get",
          dataType: "json"
        }).then(function (res) {
          _this.employees = res.data;
          console.log(_this.employees);
        })
      }
      , queryClick() {

        /***
         *  js 如何去除空格
         *  模糊查询
         * */
        /* if(this.query.name!=''){
          let _this = this;
          this.employees= this.employees.filter(function (emp) {
             return emp.name ==_this.query.name;
           })
         }*/

        /* if(this.query.dept>0){
            let _this = this;
           alert(_this.query.dept)
            this.employees = this.employees.filter(function (emp) {
               return emp.dept.id == _this.query.dept;
            })
         }
 */
      }
      , initDepts() {
        let _this = this;
        this.axios({
          url: 'http://test.org/dept/list',
          method: 'get',
          dataType: 'json'
        }).then(function (res) {
          _this.depts = res.data;
          _this.depts.unshift({
            id: 0,
            name: '---所有部门----'
          })
        })
      }
      , initTitles() {
        let _this = this;
        this.axios({
          url: 'http://test.org/title/list',
          method: 'get',
          dataType: 'json'
        }).then(function (res) {
          _this.titles = res.data;
          _this.titles.unshift({
            id: 0,
            name: '---所有职务----'
          })
        })
      }
      , rowClick(row, col, event) {

        this.$refs.elTable.clearSelection();
        this.$refs.elTable.toggleRowSelection(row);
        this.currentRow = row;

        console.log(row);
      }
      , handleCurrentChange(row) {

      }
      , btnEnterClick() {
        let _this = this;
        let dept = this.depts.find(function (dept) {
          return dept.id == parseInt(_this.dialog.employee.dept.id);
        })
        this.employees.unshift({
          name: this.dialog.employee.name,
          dept: dept
          /*title 、super*/
        })
        this.dialogVisible = false;

      }
      , btnOutClick() {
        this.employees[this.currentRow.id - 1].status = "out";

      }
      , showUpdateHandle() {
        this.dialog.employee.name = this.currentRow.name;
        // alert(this.currentRow.dept.id);
        this.dialog.employee.dept = {
          id: this.currentRow.dept.id,
          name: this.currentRow.dept.name
        }

        this.dialogVisible = true;
      }, btnChangeClick() {

        let _this  = this;
        console.log("dept")
        console.log(this.dialog.employee.dept);

        let currentDept = this.depts.find(function (dept) {
            return dept.id == _this.dialog.employee.dept.id;
        })
        this.employees[this.currentRow.id - 1].dept =currentDept;
        this.dialogVisible = false;

      }
    }, filters: {
      jobStatus(val) {
        return val == "in" ? "在职" : "离职";
      }
    }
  }
</script>

<style scoped>
  .query-zone {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .el-select {
    width: 100%;
  }

  .btn {
    width: 120px;
  }


  .emp-container {
    padding: 20px;
  }
</style>
